<template>
  <div>
    <van-nav-bar title="特色课">
      <template #right>
        <van-icon name="search" size="18" @click="$router.push('/search')" />
      </template>
    </van-nav-bar>

    <!-- 下拉菜单 -->
    <van-dropdown-menu>
      <van-dropdown-item title="分类">
        <van-cell class="flex" center>
          <van-button style="width: 40%" plain type="primary">重置</van-button>
          <van-button style="width: 40%" type="primary" color="rgb(235, 97, 0)"
            >确认</van-button
          >
        </van-cell>
      </van-dropdown-item>
      <van-dropdown-item title="排序">
        <van-cell
          center
          :title="item.title"
          v-for="item in option1"
          :key="item.id"
          @click="change1(item.id)"
          :class="{ color: flag1 == item.id }"
        >
        </van-cell>
      </van-dropdown-item>
      <van-dropdown-item title="筛选">
        <van-grid :gutter="10" style="margin: 20px 0">
          <van-grid-item
            v-for="value in option2"
            :key="value.id"
            :text="value.title"
            @click="change2(value.id)"
            :class="{ color: flag2 == value.id }"
          />
        </van-grid>
      </van-dropdown-item>
    </van-dropdown-menu>

    <van-pull-refresh
      v-model="isLoading"
      :head-height="80"
      @refresh="onRefresh"
    >
      <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
      <template #pulling="props">
        <img
          class="doge"
          src="https://img.pkdoutu.com/production/uploads/image/2020/10/31/20201031105363_MuGkQF.png"
          :style="{ transform: `scale(${props.distance / 80})` }"
        />
      </template>

      <!-- 释放提示 -->
      <template #loosing>
        <img
          class="doge"
          src="https://img.pkdoutu.com/production/uploads/image/2020/10/31/20201031105363_MuGkQF.png"
        />
      </template>

      <!-- 加载提示 -->
      <template #loading>
        <img
          class="doge"
          src="https://img.pkdoutu.com/production/uploads/image/2020/11/02/20201102278149_cKUYDM.png"
        />
      </template>
      <div class="countent">
        <div
          class="cource"
          v-for="kc in kcList"
          :key="kc.id"
          @click="goDetail(kc.id)"
        >
          <p class="title">
            <font style="vertical-align: inherit"
              ><font style="vertical-align: inherit">{{ kc.title }}</font></font
            >
          </p>
          <p class="cource_xq">
            <i class="icon van-icon van-icon-clock-o"><!----></i
            ><span
              ><font style="vertical-align: inherit"
                ><font style="vertical-align: inherit"
                  >{{ kc.start_play_date }} | </font
                ><font style="vertical-align: inherit"
                  >共{{ kc.sales_num }}课时</font
                ></font
              ></span
            >
          </p>
          <div class="cource_img">
            <ul>
              <li class="flex">
                <!-- :src="kc.teachers_list[0].teacher_avatar" -->
                <img
                  src="http://120.53.31.103:84/uploads/image/2021-06-27/iwJMzyDRE8JaruzpKsApVPuMNhRyYjen8SYaqjgg.png"
                  alt=""
                  class="image"
                />
                <p>
                  <font style="vertical-align: inherit"
                    ><font style="vertical-align: inherit">{{
                      kc.teachers_list[0].teacher_name
                    }}</font></font
                  >
                </p>
              </li>
            </ul>
          </div>
          <div class="cource_bottom">
            <span3 class="places"
              ><font style="vertical-align: inherit"
                ><font style="vertical-align: inherit"
                  >{{ kc.brows_num }}人已报名</font
                ></font
              ></span3
            ><span class="status"
              ><font style="vertical-align: inherit">
                <font
                  style="
                    vertical-align: inherit;
                    color: #44a426;
                    font-size: 0.427rem;
                  "
                  >{{ kc.price == 0 ? "免费" : kc.price + "元" }}</font
                >
              </font></span
            >
          </div>
          <!---->
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>
  
  <script>
import { dropdownList } from "@/request/http";
export default {
  data() {
    e;
    return {
      flag1: 0,
      flag2: 0,
      option1: [
        {
          id: 0,
          title: "综合示例",
        },
        {
          id: 1,
          title: "最新",
        },
        {
          id: 2,
          title: "最热",
        },
        {
          id: 3,
          title: "价格从低到高",
        },
        {
          id: 4,
          title: "价格从高到低",
        },
      ],
      option2: [
        {
          id: 0,
          title: "全部",
        },
        {
          id: 1,
          title: "大班课",
        },
        {
          id: 2,
          title: "小班课",
        },
        {
          id: 3,
          title: "公开课",
        },
        {
          id: 4,
          title: "点博客",
        },
        {
          id: 5,
          title: "面授课",
        },
        {
          id: 6,
          title: "音频课",
        },
        {
          id: 7,
          title: "系统课",
        },
        {
          id: 8,
          title: "图文课",
        },
        {
          id: 9,
          title: "会员课",
        },
      ],
      kcList: [],
      count: 0,
      isLoading: false,
    };
  },
  created() {
    let a1 = new set();
    // console.log(a);
    this.init();
  },
  methods: {
    onRefresh() {
      this.init();
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
      }, 500);
    },
    onConfirm() {
      this.$refs.item.toggle();
    },
    init() {
      dropdownList().then((res) => {
        console.log(res);
        this.kcList = res.data.data.list;
      });
    },
    goDetail(id) {
      this.$router.push({
        path: "/courseDet",
        query: { id },
      });
    },
    change1(id) {
      this.flag1 = id;
      this.init();
      console.log(12);
    },
    change2(id) {
      this.flag2 = id;
      this.init();
      console.log(34);
    },
  },
};
</script>
  
<style scoped lang="scss">
.color ::v-deep {
  color: #eb6100;
}
.color ::v-deep .van-grid-item__text {
  color: #eb6100;
}
.van-cell__value {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex {
  display: flex;
  align-items: center;
}
.countent {
  .cource {
    font-size: 12px;
    width: 93%;
    background: #fff;
    height: 4.8rem;
    margin: 0.4rem auto;
    border-radius: 0.16rem;
    display: flex;
    flex-direction: column;
    position: relative;
    .title {
      font-size: 0.453rem;
      padding: 0 0.267rem;
      padding-top: 0.267rem;
    }
    .cource_xq {
      font-size: 12px;
      color: #777;
      padding: 0 0.267rem;
      margin-top: -0.267rem;
      display: flex;
      align-items: center;
    }
    .cource_bottom {
      font-size: 12px;
      display: flex;
      justify-content: space-between;
      padding: 0.667rem 0.267rem;
    }
  }
}

.doge {
  width: 150px;
  height: auto;
  margin-top: 8px;
  border-radius: 4px;
}
</style>